<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>SSS</title>
  <script src="js/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>

<body>

  <audio id="audio1" src="piano/piano.mp3" preload="auto"></audio>

  <div id="wrapper">
    <div id="mask" onclick="Mask.hide();About.removeClass('about_show');setTimeout(function(){About.hide();},500)"></div>
    <div id="about">
      <div class="title" style="text-align:center;padding:20px;">关于</div>
      <div class="section" style="text-align:center;padding:5px;">SSS(A simulator of SoundGenerator in Survivalcraft)是一个生存战争声音产生器的模拟器，通过本工具可以方便地播放、测试、转换、弹奏乐谱。建议使用拥有较新Webkit内核的浏览器浏览。更新日期：2016年8月27日。</div>
      <div class="title" style="text-align:center;padding:20px;">作者</div>
      <div class="section" style="text-align:center;padding:5px;"><a href="http://tieba.baidu.com/home/main/?un=%E9%94%80%E9%94%8B%E9%95%9D%E9%93%B8&ie=utf-8" target="_blank">销锋镝铸</a></div>
      <div class="section" style="text-align:center;padding:5px;"><a href="http://tieba.baidu.com/home/main/?un=lzm956902416&ie=utf-8" target="_blank">lzm956902416</a></div>
      <div class="section" style="text-align:center;padding:5px;"><a href="http://tieba.baidu.com/home/main/?un=%E7%94%B5%E7%A6%BB%E7%9A%84Tesla&ie=utf-8" target="_blank">电离的Tesla</a></div>
      <div class="title" style="text-align:center;padding:20px;">项目主页</div>
      <div class="section" style="text-align:center;padding:5px;">
        <a href="https://github.com/XiaofengdiZhu/SSS" target="_blank">github.com/XiaofengdiZhu/SSS</a><br />
        <a href="https://gitee.com/suancaixianyu/SSS" target="_blank">gitee.com/suancaixianyu/SSS</a><br />
        你可以从此下载该工具并离线运行
      </div>
      <div class="button_md button_flat" onclick="Mask.hide();About.removeClass('about_show');setTimeout(function(){About.hide();},500)">关闭</div>
    </div>

    <!-- 顶部 -->
    <div id="top_bar" onwheel="change_page(0)">
      <div id="cum">
        <img id="page_changer_1" class="page_changer page_changer_active" src="img/page_first.png" onclick="change_page(0)">
        <img id="page_changer_2" class="page_changer" src="img/page_second.png" onclick="change_page(1)">
        <img id="page_changer_3" class="page_changer" src="img/qing.svg" onclick="change_page(2)" style="width:32px;">
      </div>
      <img src="img/menu_btn.svg" style="position:absolute;top:50%;margin-top:-12px;right:12px;cursor:pointer;"
        onclick="Menu.show();Menu.addClass('menu_show');">
      <div id="menu" onclick="Mask.show();About.show();About.addClass('about_show');">关于</div>
    </div>

    <!-- 内容栏 -->
    <div class="pages">

      <!-- 板块 -->
      <div id="page" class="page_big page1" style='overflow: hidden;display:hidden;'>
        <svg class="bg" id="组_3" data-name="组 3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="384" height="384" viewBox="0 0 384 384">
          <image id="图层_1" data-name="图层 1" width="384" height="384" xlink:href="data:img/png;base64,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"/>
          
          <rect id="0-1" class="-1" x="296" y="264" width="48" height="16" fill="transparent"/>
          <rect id="1-1" class="-1" x="280" y="280" width="16" height="32" fill="transparent"/>
          <rect id="2-1" class="-1" x="344" y="280" width="16" height="32" fill="transparent"/>
          <rect id="3-1" class="-1" x="296" y="312" width="48" height="16" fill="transparent"/>
          <rect id="4-1" class="-1" x="280" y="328" width="16" height="32" fill="transparent"/>
          <rect id="5-1" class="-1" x="344" y="328" width="16" height="32" fill="transparent"/>
          <rect id="6-1" class="-1" x="296" y="360" width="48" height="16" fill="transparent"/>

          <rect id="0-2" class="-2" x="40" y="264" width="48" height="16" fill="transparent"/>
          <rect id="1-2" class="-2" x="24" y="280" width="16" height="32" fill="transparent"/>
          <rect id="2-2" class="-2" x="88" y="280" width="16" height="32" fill="transparent"/>
          <rect id="3-2" class="-2" x="40" y="312" width="48" height="16" fill="transparent"/>
          <rect id="4-2" class="-2" x="24" y="328" width="16" height="32" fill="transparent"/>
          <rect id="5-2" class="-2" x="88" y="328" width="16" height="32" fill="transparent"/>
          <rect id="6-2" class="-2" x="40" y="360" width="48" height="16" fill="transparent"/>

          <rect id="0-3" class="-3" x="40" y="8" width="48" height="16" fill="transparent"/>
          <rect id="1-3" class="-3" x="24" y="24" width="16" height="32" fill="transparent"/>
          <rect id="2-3" class="-3" x="88" y="24" width="16" height="32" fill="transparent"/>
          <rect id="3-3" class="-3" x="40" y="56" width="48" height="16" fill="transparent"/>
          <rect id="4-3" class="-3" x="24" y="72" width="16" height="32" fill="transparent"/>
          <rect id="5-3" class="-3" x="88" y="72" width="16" height="32" fill="transparent"/>
          <rect id="6-3" class="-3" x="40" y="104" width="48" height="16" fill="transparent"/>
        </svg><br>

        <input id="progress_range_value" type="text" placeholder="0" onfocus="isProgressEditing=true" onblur="isProgressEditing=false;now_node = this.value - 1;" onkeydown='if(event.keyCode==13){isProgressEditing=false;now_node = this.value - 1;$(this).blur();}'></input>
        <input type="range" id="progress_range" min="1" max="1" step="1" defaultValue="1" onchange="now_node = this.value - 1;Progress_range_value.val(this.value);" onmousedown="isProgressEditing=true" onmouseup="isProgressEditing=false"/>
        <input id="progress_range_max" value="0"><br>
        <div id='play_toggle' class='audio_btn button_md'></div>
        <div id='stop_btn' class='audio_btn button_md'></div>
        <div id='notes'></div>
      </div>

      <!-- 板块 -->
      <div id="page" class="page1">
        <div class="section">
          <div class="title">音量</div>
          <div class="describe">0-f，可大写，错误输入或本框无输入时默认为f，有输入但字符数小于音高框字符数时，不足部分默认为该框最后一个有效字符</div>
          <textarea id="volume" class='lockable' placeholder="音量" rows="1"></textarea>
        </div>
        <div class="section">
          <div class="title">音高</div>
          <div class="describe">0-f，可大写，默认f，播放到末尾时自动停止播放</div>
          <textarea id="pitch" class='lockable' placeholder="音高" rows="1"></textarea>
        </div>
        <div class="section">
          <div class="title"> 八度</div>
          <div class="describe">0-2，错误输入或不输入时默认为0)</div>
          <textarea id="octave" class='lockable' placeholder="八度" rows="1"></textarea>
        </div>
        <div class="section">
          <div class="title">延时</div>
          <div class="describe">0-9分别对应0.2、0.3、0.333、0.4、0.5、0.6、0.7、0.8、0.9、1秒，错误输入或本框无输入时默认为4，即0.5秒，有输入但字符数小于音高框字符数时，不足部分默认为该框最后一个有效字符</div>
          <textarea id="tempo" class='lockable' placeholder="延时" rows="1"></textarea>
        </div>
        <div class="section">
          <div class="title">载入乐谱</div>
          <div onclick="if(!isLock) paste_result()" class="button_md button_flat" style="width:120px">简谱转换结果</div>
          <div onclick="loadMusicScore(this)" class="button_md button_flat" data-music='test' style="width:80px">测试</div>
          <div onclick="loadMusicScore(this)" class="button_md button_flat" data-music='twinkle_star' style="width:100px">小星星</div>
          <div onclick="loadMusicScore(this)" class="button_md button_flat" data-music='happy_birthday' style="width:120px">祝你生日快乐</div>
        </div>
      </div>

      <!-- 板块 -->
      <div id="page" class="page_big page2">
        <div style="text-align:center;">点击琴键发声并将音符输入到简谱输入框中</div>
            <div id="keyboards">
              <div class='keyboard'>
                <div class="button white_key">
                  <div class='key_txt'><img src='img/dot.svg' style='height:3px; position:relative; top:25px;' /><br />1</div>
                </div>
                <div class="button black_key" style="margin-left:16px;"></div>
                <div class="button white_key" style="margin-left:24px;"></div>
                <div class="button black_key" style="margin-left:40px;"></div>
                <div class="button white_key" style="margin-left:48px;"></div>
                <div class="button white_key" style="margin-left:72px;"></div>
                <div class="button black_key" style="margin-left:88px;"></div>
                <div class="button white_key" style="margin-left:96px;"></div>
                <div class="button black_key" style="margin-left:112px;"></div>
                <div class="button white_key" style="margin-left:120px;"></div>
                <div class="button black_key" style="margin-left:136px;"></div>
                <div class="button white_key" style="margin-left:144px;"></div>
              </div>
              <div class='keyboard'>
                <div class="button white_key">
                  <div class='key_txt'>1</div>
                </div>
                <div class="button black_key" style="margin-left:16px;"></div>
                <div class="button white_key" style="margin-left:24px;"></div>
                <div class="button black_key" style="margin-left:40px;"></div>
                <div class="button white_key" style="margin-left:48px;"></div>
                <div class="button white_key" style="margin-left:72px;"></div>
                <div class="button black_key" style="margin-left:88px;"></div>
                <div class="button white_key" style="margin-left:96px;"></div>
                <div class="button black_key" style="margin-left:112px;"></div>
                <div class="button white_key" style="margin-left:120px;"></div>
                <div class="button black_key" style="margin-left:136px;"></div>
                <div class="button white_key" style="margin-left:144px;"></div>
              </div>
              <div class='keyboard'>
                <div class="button white_key">
                  <div class='key_txt'><img src='img/dot.svg' style='height:3px; position:relative; top:4px;' /><br />1</div>
                </div>
                <div class="button black_key" style="margin-left:16px;"></div>
                <div class="button white_key" style="margin-left:24px;"></div>
                <div class="button black_key" style="margin-left:40px;"></div>
                <div class="button white_key" style="margin-left:48px;"></div>
                <div class="button white_key" style="margin-left:72px;"></div>
                <div class="button black_key" style="margin-left:88px;"></div>
                <div class="button white_key" style="margin-left:96px;"></div>
                <div class="button black_key" style="margin-left:112px;"></div>
                <div class="button white_key" style="margin-left:120px;"></div>
                <div class="button black_key" style="margin-left:136px;"></div>
                <div class="button white_key" style="margin-left:144px;"></div>
              </div>
            </div>
          <button class="button white_key rest_key" style="margin-top:5px" onclick="$('#nmn').val($('#nmn').val() + '0');">0</button>
      </div>

      <!-- 板块 -->
      <div id="page" class="page2">
        <div class="section">
          <div class="title">简谱转换</div>
          <div class="describe">0-7，C=1，在数字前加上#代表升高半音，八度默认为1，用圆括号()、方括号[]框住一个或多个数字分别代表低一个八度、高一个八度，暂不支持节拍,错误输入将输出无效</div>
          <textarea id="nmn" class='lockable' placeholder="简谱" rows="1"></textarea>
        </div>
        <div class="section" style="padding:0px 20px;text-align: right;">
          <div class="button_md button_float" onclick="if(!isLock) transform();">转换</div>
        </div>
        <div class="section">
          转换结果：
          <br /> 音高：
          <span id="transformed_pitch"></span>
          <br /> 八度：
          <span id="transformed_octave"></span>
        </div>
        <div class="section">
          <div class="title">转换成简谱</div>
          <div class="describe">将音高、八度输入框内容转换成简谱</div>
        </div>
        <div class="section" style="padding:0px 20px;text-align: right;">
          <div class="button_md button_float" onclick="if(!isLock) InverseTransform();">转换</div>
        </div>
        <div class="section">
          转换结果：<span id="inverseTransformed"></span>
        </div>
      </div>

      <!-- 板块 -->
      <div id="page" class="page3">
        <div class="section">
          <div class="title">原神琴谱转换</div>
          <div class="describe">目前支持键盘谱转换，支持多音轨转换，键盘中：<br>QWERTYU<br>ASDFGHJ<br>ZXCVBNM<br>每一行对应音高1234567，从上到下对应八度2,1,0<br>括号表示一起按下的键，支持大小写</div>
          <textarea id="genshin" class='lockable' placeholder="键盘谱" rows="1"></textarea>
        </div>
        <div class="section" style="padding:0px 20px;text-align: right;">
          <div class="button_md button_float" onclick="genshintransform();">转换</div>
        </div>
      </div>
      <!-- 板块 -->
      <div id="page" class="page3">
        <div class="section">
          <div class="title">转换参数设置</div>
          <div class="describe">(自动)最大音轨数:</div>
          <input class="num">
          <div class="checkbox" style="margin-top: 20px;">
            <input id="sccommand" type="checkbox" name="vehicle" value="Bike">
            <label for="sccommand">导出命令方块适用的txt文件</label>
          </div>
        </div>
      </div>
      <!-- 板块 -->
      <div id="page" class="page3">
        <div class="section" style="display: flex; justify-content: space-between;">
          <div class="title">转换结果</div>
          <div class="button_md button_float" onclick="downloadTxtFile(dwfile);" style="margin: 0px;">下载结果</div>
        </div>
        <div class="section">
          <pre id="jieguo"></pre>
        </div>
      </div>

    </div>

  </div>
</body>

<script src="js/app.js"></script>

</html>